import { memo, useEffect, useState } from "react";
import { Tabs } from "antd-mobile";
import { product_arr } from "../../constant";
import TabStyle from "./style";
import { useDispatch } from "react-redux";
import { setSlectedTab } from "../../states/home";

const TabSelect = memo(() => {
  const [activeKey, setActiveKey] = useState<string>(product_arr[0].key);
  useEffect(() => {
    dispatch(setSlectedTab(activeKey));
  }, [activeKey]);

  const dispatch = useDispatch();
  const tabsChange = (value: string) => {
    setActiveKey(value);
  };
  return (
    <TabStyle>
      <Tabs onChange={(value) => tabsChange(value)} activeKey={activeKey}>
        {product_arr.map((item) => (
          <Tabs.Tab title={item.title} key={item.key} />
        ))}
      </Tabs>
    </TabStyle>
  );
});

export default TabSelect;
